<template>
	<view class="">
		<uni-card :title="text" style="margin-top: 10px;">
			<view class="" style="display: flex;align-items: center;">
				<uni-easyinput v-model="user.content" placeholder="请输入内容" />
				<view class="" style="display: flex;align-items: center;margin-left: 10px;">
					<button type="primary" size="mini" @click="submit" style="margin-top: 0px;">发送</button>
				</view>
			</view>
			<view class="" style="margin-top: 20px;">
				<view v-for="(item,index) in list" :key="index">
					<view class="" style="display: flex;">
						<image src="../../static/tx.png" style="height: 45px;width: 45px;" mode=""></image>
						<view class="" style="margin-left: 10px;">
							<view class="" style="font-size: 12px;color: #737373;">{{item.name}}</view>
							<view class="item" style="margin-top: 5px;font-size: 14px;">{{item.content}}</view>
							<view class="item" style="display: flex;margin-top: 2px;">
								<view class="">
									<uni-dateformat style="font-size: 12px;color: #737373;" :date="item.time" />
								</view>
								<view class="" style="margin: 0 6px;">·</view>
								<view class="" style="font-size: 12px;color: #737373;">中国
								</view>
								<view class="" style="display: flex;align-items: center;margin-left: 10px;">
									<uni-icons type="heart-filled" @click="item.like++" color="red" v-if="item.like>0">
									</uni-icons>
									<uni-icons type="heart" @click="item.like++" v-else></uni-icons>
									<view class="" style="margin-left: 3px;">{{item.like}}</view>
								</view>
							</view>
						</view>
					</view>

					<view class="line"></view>
				</view>
			</view>
		</uni-card>
	</view>
</template>

<script>
	export default {
		name: "comment",
		props: {
			text: {
				type: String,
				default: "评论区"
			},
		},
		data() {
			return {
				user: {
					content: "",
					name: "",
					time: null,
					like: 0
				},
				list: [{
						"content": "很好很好很好啊",
						"name": "20972123546",
						"time": "2023-03-07T06:15:55.230Z",
						"like": 0
					},
					{
						"content": "很好很好很好啊",
						"name": "20972123546",
						"time": "2023-03-07T06:15:55.069Z",
						"like": 0
					},
					{
						"content": "很好很好很好啊",
						"name": "20972123546",
						"time": "2023-03-07T06:15:54.926Z",
						"like": 0
					},
					{
						"content": "很好很好很好啊",
						"name": "20972123546",
						"time": "2023-03-07T06:15:54.775Z",
						"like": 0
					},
					{
						"content": "很好很好很好啊",
						"name": "20972123546",
						"time": "2023-03-07T06:15:54.644Z",
						"like": 0
					},
					{
						"content": "很好很好很好啊",
						"name": "20972123546",
						"time": "2023-03-07T06:15:54.513Z",
						"like": 0
					},
					{
						"content": "很好很好很好啊",
						"name": "20972123546",
						"time": "2023-03-07T06:15:54.209Z",
						"like": 0
					},
					{
						"content": "很好很好很好啊",
						"name": "20972123546",
						"time": "2023-03-07T06:15:54.040Z",
						"like": 0
					},
					{
						"content": "很好很好很好啊",
						"name": "20972123546",
						"time": "2023-03-07T06:15:53.741Z",
						"like": 0
					}
				]
			};
		},
		methods: {
			submit() {
				let user = this.user
				user.name = uni.getStorageSync("user").nickName
				user.time = new Date()
				this.list.unshift(JSON.parse(JSON.stringify(user)))
				console.log(this.list);
			}
		}

	}
</script>

<style>

</style>
